<template>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>医生个人信息</span>
        </div>
      </template>
      
      <el-form 
        ref="doctorInfoForm" 
        :model="doctorInfo" 
        :rules="rules" 
        label-width="120px" 
        label-position="right"
        status-icon
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input 
                v-model="doctorInfo.email" 
                placeholder="邮箱" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电话" prop="phone">
              <el-input 
                v-model="doctorInfo.phone" 
                placeholder="电话" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="医生姓名" prop="doctorName">
              <el-input 
                v-model="doctorInfo.doctorName" 
                placeholder="医生姓名" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="执业证号" prop="licenseNumber">
              <el-input 
                v-model="doctorInfo.licenseNumber" 
                placeholder="执业证号" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="专业领域" prop="specialty">
              <el-input 
                v-model="doctorInfo.specialty" 
                placeholder="专业领域" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所在医院" prop="hospital">
              <el-input 
                v-model="doctorInfo.hospital" 
                placeholder="所在医院" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="医生简介" prop="introduction">
              <el-input 
                v-model="doctorInfo.introduction" 
                type="textarea"
                placeholder="医生简介" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="用户角色" prop="coreRole">
              <el-input 
                v-model="doctorInfo.coreRole" 
                readonly 
                placeholder="用户角色" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="在线状态" prop="onlineStatus">
              <el-input 
                v-model="doctorInfo.onlineStatus" 
                readonly 
                placeholder="在线状态" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="创建时间" prop="createdAt">
              <el-input 
                v-model="doctorInfo.createdAt" 
                readonly 
                placeholder="创建时间" 
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间" prop="updatedAt">
              <el-input 
                v-model="doctorInfo.updatedAt" 
                readonly 
                placeholder="更新时间" 
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item>
          <el-button type="primary" @click="submitForm">保存修改</el-button>
          <el-button @click="resetForm">重置</el-button>
          <el-button @click="fetchDoctorInfo">刷新信息</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </template>
  
  <script>
  import { ref, reactive, onMounted } from 'vue';
  import { selectUser } from '@/api/user'; // 假设你有一个 API 来获取管理员信息
  import { updateUser , updateDoctor } from '@/api/userManger'; // 假设你有一个 API 来获取管理员信息



  export default {
    setup() {
      const doctorInfo = reactive({
        email: '',
        phone: '',
        doctorName: '',
        licenseNumber: '',
        specialty: '',
        hospital: '',
        introduction: '',
        coreRole: '',
        onlineStatus: null,
        createdAt: '',
        updatedAt: ''
      });

      const userDO = reactive({
        userId: localStorage.getItem('id'), // 假设你有一个 API 来获取管理员信息,
        email: '',
        phone: '',
      });

      const doctorDO = reactive({
        userId: localStorage.getItem('id'), // 假设你有一个 API 来获取管理员信息,
        name: '',
        licenseNumber: '',
        specialty: '',
        hospital: '',
        introduction: '',
      });
  
      // 表单规则
      const rules = reactive({
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
        ],
        phone: [
          { required: true, message: '请输入电话号码', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' }
        ],
        doctorName: [
          { required: true, message: '请输入医生姓名', trigger: 'blur' }
        ],
        licenseNumber: [
          { required: true, message: '请输入执业证号', trigger: 'blur' }
        ]
      });
  
      // 表单引用
      const doctorInfoForm = ref(null);
  
      // 获取医生信息
      const fetchDoctorInfo = async () => {
        try {
          // 这里使用 fetch 模拟从后端获取数据，实际项目中应该替换为 axios 或其他 HTTP 请求工具
          const response = await selectUser(localStorage.getItem('id'));
          
          
          // 整合信息
          if (response.code === '000') {
            const { userDO, doctorDO } = response.data;
            doctorInfo.email = userDO.email;
            doctorInfo.phone = userDO.phone;
            doctorInfo.coreRole = userDO.coreRole || '未设置';
            doctorInfo.onlineStatus = userDO.onlineStatus || 0;
            doctorInfo.createdAt = userDO.createdAt;
            doctorInfo.updatedAt = userDO.updatedAt;
  
            if (doctorDO) {
              doctorInfo.doctorName = doctorDO.doctorName;
              doctorInfo.licenseNumber = doctorDO.licenseNumber;
              doctorInfo.specialty = doctorDO.specialty;
              doctorInfo.hospital = doctorDO.hospital;
              doctorInfo.introduction = doctorDO.introduction;
            }
          }
        } catch (error) {
          console.error('获取医生信息失败:', error);
          alert('获取医生信息失败，请稍后再试');
        }
      };
  
      // 提交表单
      const submitForm = () => {
        doctorInfoForm.value.validate(async (valid) => {
          if (valid) {
            alert('提交成功!');
            userDO.userId = localStorage.getItem('id'); // 假设你有一个 API 来获取管理员信息,
            userDO.email = doctorInfo.email;
            userDO.phone = doctorInfo.phone;
            doctorDO.userId = localStorage.getItem('id'); // 假设你有一个 API 来获取管理员信息,
            doctorDO.name = doctorInfo.doctorName;
            doctorDO.licenseNumber = doctorInfo.licenseNumber;
            doctorDO.specialty = doctorInfo.specialty;
            doctorDO.hospital = doctorInfo.hospital;
            doctorDO.introduction = doctorInfo.introduction;

            try {
              const userResponse = await updateUser(userDO); // 替换为你的更新用户信息的 API 调用
              const doctorResponse = await updateDoctor(doctorDO); // 替换为你的更新医生信息的 API 调用

              if (userResponse.code === '000' && doctorResponse.code === '000') {
                alert('信息更新成功');
              }
            } catch (error) {
              
              alert('信息更新失败，请稍后再试');
            }

            // 这里可以添加提交到后端的逻辑
          } else {
            console.log('表单验证失败');
            return false;
          }
        });
      };
  
      // 重置表单
      const resetForm = () => {
        doctorInfoForm.value.resetFields();
      };
  
      // 页面加载时获取医生信息
      onMounted(() => {
        fetchDoctorInfo();
      });
  
      return {
        doctorInfo,
        rules,
        doctorInfoForm,
        submitForm,
        resetForm,
        fetchDoctorInfo
      };
    }
  }
  </script>
  
  <style scoped>
  .box-card {
    max-width: 1000px;
    margin: 20px;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  h3 {
    margin-top: 20px;
    margin-bottom: 15px;
    color: #606266;
  }
  
  .el-row {
    margin-bottom: 15px;
  }
  </style>